<template>
  <div class="news-detail-container">
    <!-- 页面标题 -->
    <div class="page-title mb-6">
      <h1 class="text-3xl font-bold text-center">新闻资讯中心</h1>
      <p class="text-gray-600 text-center mt-2">及时、准确、全面的新闻资讯平台</p>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-container mb-8">
      <el-menu mode="horizontal" :router="true" class="nav-menu">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/newsIndex">新闻列表</el-menu-item>
      </el-menu>
    </div>

    <!-- 新闻内容 -->
    <div class="news-content max-w-4xl mx-auto p-4">
      <div v-loading="loading">
        <div v-if="newsDetail" class="bg-white rounded-lg shadow-md p-8">
          <!-- 面包屑导航 -->
          <div class="breadcrumb mb-6">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/newsIndex' }">新闻列表</el-breadcrumb-item>
              <el-breadcrumb-item>{{ newsDetail.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <h1 class="text-3xl font-bold mb-4 text-center">{{ newsDetail.title }}</h1>
          <div class="flex justify-center text-gray-500 text-sm mb-8">
            <span>发布时间: {{ newsDetail.createTime }}</span>
          </div>
          <div class="news-body prose max-w-none" v-html="newsDetail.content"></div>
          
          <!-- 分割线 -->
          <div class="divider my-8">
            <el-divider content-position="center">正文结束</el-divider>
          </div>

          <!-- 相关新闻 -->
          <div class="related-news mb-8">
            <h3 class="text-xl font-bold mb-4">相关新闻</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div v-for="item in relatedNews" :key="item.newsId" class="related-news-item">
                <router-link :to="`/news/${item.newsId}`" class="flex items-center hover:bg-gray-50 p-3 rounded-lg">
                  <div class="flex-1">
                    <h4 class="text-base font-medium text-gray-900 line-clamp-1">{{ item.title }}</h4>
                    <p class="text-sm text-gray-500 mt-1">{{ item.createTime }}</p>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center py-10">
          <p class="text-gray-500">新闻不存在或已被删除</p>
          <div class="mt-4">
            <router-link to="/newsIndex" class="text-blue-600 hover:underline mr-4">
              <el-button type="primary" plain>返回新闻列表</el-button>
            </router-link>
            <router-link to="/" class="text-blue-600 hover:underline">
              <el-button type="primary" plain>返回首页</el-button>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <footer class="footer mt-8 py-6 border-t">
      <div class="max-w-4xl mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="footer-section">
            <h4 class="text-lg font-bold mb-4">关于我们</h4>
            <p class="text-gray-600">我们致力于提供最新、最全面的新闻资讯，为用户打造优质的阅读体验。</p>
          </div>
          <div class="footer-section">
            <h4 class="text-lg font-bold mb-4">快速链接</h4>
            <ul class="space-y-2">
              <li><router-link to="/" class="text-gray-600 hover:text-blue-600">首页</router-link></li>
              <li><router-link to="/newsIndex" class="text-gray-600 hover:text-blue-600">新闻列表</router-link></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4 class="text-lg font-bold mb-4">联系方式</h4>
            <ul class="space-y-2 text-gray-600">
              <li>邮箱：contact@example.com</li>
              <li>电话：400-123-4567</li>
            </ul>
          </div>
        </div>
        <div class="copyright text-center mt-8 pt-4 border-t text-gray-500">
          <p>Copyright © 2024 新闻资讯中心. All Rights Reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { customerGetNews } from "@/api/system/news.js";

const route = useRoute();
const loading = ref(true);
const newsDetail = ref(null);
const relatedNews = ref([
  { newsId: 1, title: '公司成功研发新一代核心技术', createTime: '2024-03-15' },
  { newsId: 2, title: '行业新政策解读：机遇与挑战', createTime: '2024-03-14' },
  { newsId: 3, title: '公司完成新一轮战略融资', createTime: '2024-03-13' },
  { newsId: 4, title: '技术创新引领行业发展新方向', createTime: '2024-03-12' }
]);

const getNewsDetail = async () => {
  try {
    loading.value = true;
    const newsId = route.params.newsId;
    const response = await customerGetNews(newsId);
    newsDetail.value = response.data;
  } catch (error) {
    console.error('获取新闻详情失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getNewsDetail();
});
</script>

<style scoped>
.news-detail-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 24px;
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page-title h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
}

.page-title p {
  font-size: 18px;
  color: #666666;
  margin-top: 8px;
}

.nav-container {
  background: #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.nav-menu {
  display: flex;
  justify-content: center;
  border-bottom: none;
}

.nav-menu :deep(.el-menu-item) {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
}

.nav-menu :deep(.el-menu-item.is-active) {
  color: #409EFF;
  border-bottom: 3px solid #409EFF;
  background: rgba(64, 158, 255, 0.1);
}

.nav-menu :deep(.el-menu-item:hover) {
  color: #409EFF;
  background: rgba(64, 158, 255, 0.15);
}

.news-content {
  padding-top: 20px;
  padding-bottom: 40px;
}

.news-content :deep(.el-card) {
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
}

:deep(.prose) {
  line-height: 1.8;
  font-size: 16px;
  color: #333333;
}

:deep(.prose img) {
  max-width: 50%;
  height: auto;
  margin: 1.5rem auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.prose p) {
  margin-bottom: 1.5rem;
  text-align: justify;
  color: #333333;
  text-indent: 2em;
}

:deep(.prose h2) {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #333333;
  text-indent: 0;
}

:deep(.prose h3) {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 1.25rem;
  color: #333333;
  text-indent: 0;
}

:deep(.prose ul),
:deep(.prose ol) {
  text-indent: 0;
  padding-left: 2em;
}

:deep(.prose li) {
  text-indent: 0;
  margin-bottom: 0.5rem;
}

:deep(.prose a) {
  color: #409EFF;
  text-decoration: none;
}

:deep(.prose a:hover) {
  text-decoration: underline;
}

.breadcrumb {
  background: transparent;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 20px;
}

.news-cover {
  background: transparent;
  padding: 1rem;
  border-radius: 12px;
}

.news-cover img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.divider {
  background: transparent;
  padding: 1rem;
  border-radius: 8px;
}

.divider :deep(.el-divider__text) {
  background-color: #f5f7fa;
  padding: 0 1rem;
  color: #909399;
  font-size: 0.9rem;
}

.related-news {
  background: transparent;
  padding: 2rem;
  border-radius: 12px;
}

.related-news-item {
  background: transparent;
  border-radius: 8px;
  margin: 0.5rem 0;
}

.related-news-item a {
  color: #409EFF;
  text-decoration: underline;
}

.related-news-item:hover {
  transform: translateX(5px);
  background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
}

.related-news-item:hover a {
  color: #66b1ff;
}

.footer {
  background: #f5f5f5;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px 12px 0 0;
  margin-top: 2rem;
}

.footer-section {
  background: transparent;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 0.5rem;
}

.footer-section h4 {
  color: #333333;
}

.footer-section ul li {
  transition: color 0.3s ease;
}

.copyright {
  background: transparent;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .footer .grid {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    padding: 1.5rem;
  }
  
  .related-news {
    padding: 1.5rem;
  }
}
</style> 